<template>
    <div class="sideBar left">
        <div class="briefIntroduction">
            <div class="brieContnet">
                <div class="sayHi">👋 中午好！我是</div>
                <h2 class="name">叁柒 (SanQi)</h2>
                <div class="dsc">
                    这有关于<b>产品、设计、开发</b>相关的问题和看法，还有<b>文章翻译</b>和<b>分享</b>。
                </div>
                <div class="dsc1">
                    相信你可以在这里找到对你有用的<b>知识</b>和<b>教程。</b>
                </div>
                <div class="img">
                    <img src="~/static/img/okhand.png" alt="" />
                </div>
                <div class="button">
                    <a href="#"
                        ><svg
                            t="1627041266152"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="4126"
                            width="200"
                            height="200"
                        >
                            <path
                                d="M429.653333 874.794667a42.666667 42.666667 0 0 0-50.346666-41.941334c-55.893333 10.24-126.421333 11.776-145.152-40.874666a243.541333 243.541333 0 0 0-78.378667-103.04 51.2 51.2 0 0 1-7.125333-4.693334 42.666667 42.666667 0 0 0-39.68-27.52h-0.213334a42.666667 42.666667 0 0 0-42.666666 42.453334c-0.170667 34.773333 34.56 57.088 48.682666 64.597333a189.44 189.44 0 0 1 39.424 58.026667c15.573333 43.648 60.714667 109.909333 190.549334 101.376l0.128 4.181333 0.170666 11.434667a42.666667 42.666667 0 0 0 85.333334 0l-0.213334-13.568c-0.213333-8.106667-0.512-19.797333-0.512-50.432zM884.778667 229.418667c1.365333-5.333333 2.688-11.264 3.84-17.92a267.861333 267.861333 0 0 0-17.408-140.501334 42.752 42.752 0 0 0-26.24-24.746666c-15.189333-5.12-71.253333-15.232-178.517334 53.333333a591.786667 591.786667 0 0 0-271.104 0C288.512 32 232.746667 41.216 217.685333 46.037333a42.538667 42.538667 0 0 0-26.922666 24.917334 268.8 268.8 0 0 0-17.237334 143.232c1.066667 5.418667 2.176 10.496 3.370667 15.104a267.52 267.52 0 0 0-53.589333 163.413333 359.338667 359.338667 0 0 0 1.834666 39.296c14.250667 196.394667 142.250667 255.317333 231.424 275.584a195.882667 195.882667 0 0 0-5.034666 17.066667 42.666667 42.666667 0 0 0 82.858666 20.437333 71.594667 71.594667 0 0 1 19.968-37.461333 42.666667 42.666667 0 0 0-23.296-74.453334c-147.370667-16.853333-211.370667-76.885333-221.013333-209.024a282.026667 282.026667 0 0 1-1.408-31.488 181.674667 181.674667 0 0 1 39.253333-115.754666 128.938667 128.938667 0 0 1 8.32-9.856 42.666667 42.666667 0 0 0 8.021334-43.733334 144.554667 144.554667 0 0 1-6.613334-23.68 174.677333 174.677333 0 0 1 3.370667-68.949333 321.834667 321.834667 0 0 1 103.04 50.346667 43.050667 43.050667 0 0 0 35.285333 5.674666 502.485333 502.485333 0 0 1 263.381334 0.042667 42.88 42.88 0 0 0 35.413333-5.888 323.072 323.072 0 0 1 102.656-50.773333 172.373333 172.373333 0 0 1 3.712 67.328 136.746667 136.746667 0 0 1-7.210667 25.898666 42.666667 42.666667 0 0 0 8.021334 43.733334c3.328 3.712 6.613333 7.68 9.557333 11.434666A175.872 175.872 0 0 1 853.333333 392.661333a300.330667 300.330667 0 0 1-1.621333 33.152c-9.386667 130.389333-73.6 190.464-221.653333 207.36a42.666667 42.666667 0 0 0-23.296 74.496 69.546667 69.546667 0 0 1 19.882666 38.741334 130.56 130.56 0 0 1 3.968 34.986666v99.541334c-0.426667 27.648-0.426667 48.341333-0.426666 57.856a42.666667 42.666667 0 1 0 85.333333 0c0-9.258667 0-29.525333 0.426667-57.173334v-100.266666a208.256 208.256 0 0 0-6.613334-55.936 181.589333 181.589333 0 0 0-4.949333-17.749334 277.888 277.888 0 0 0 232.32-274.090666A371.072 371.072 0 0 0 938.666667 392.661333a261.546667 261.546667 0 0 0-53.888-163.242666z"
                                p-id="4127"
                                :fill="
                                    !this.$store.state.isDark ? '#000' : '#fff'
                                "
                            ></path></svg
                    ></a>

                    <a href="#">
                        <svg
                            width="24"
                            height="22"
                            viewBox="0 0 24 22"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M17.813 3.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 17.858 0 16.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 01-.373-.906c0-.356.124-.658.373-.907L4.96.693c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 3.44c.071.071.134.142.187.213h4.267a.835.835 0 01.16-.213L17.12.693c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906l-1.174 1.12zM5.333 6.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773H5.333zM8 10.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V11.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V11.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"
                                :fill="
                                    !this.$store.state.isDark ? '#000' : '#fff'
                                "
                            ></path>
                        </svg>
                    </a>

                    <a href="#"
                        ><svg
                            t="1627042263408"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="7602"
                            width="200"
                            height="200"
                        >
                            <path
                                d="M970.56 267.52a85.76 85.76 0 0 0 0-10.24v-2.88l-17.92 1.6 15.68-3.84v-3.52A141.44 141.44 0 0 0 960 227.2a128 128 0 0 0-11.2-20.48 123.84 123.84 0 0 0-103.04-54.72H176.96a123.84 123.84 0 0 0-102.72 55.36 128 128 0 0 0-11.84 22.72 124.8 124.8 0 0 0-6.72 22.72l16 3.2h-16.64a81.92 81.92 0 0 0-1.6 11.84v512a124.48 124.48 0 0 0 124.16 124.16h668.8a124.48 124.48 0 0 0 124.16-124.16v-512zM883.2 304v448a64 64 0 0 1-64 64H205.12a64 64 0 0 1-64-64v-448a64 64 0 0 1 1.92-16l334.4 267.84 2.56 3.2a48.96 48.96 0 0 0 26.88 11.84h6.08a42.24 42.24 0 0 0 31.04-11.84L880.96 288a62.08 62.08 0 0 1 2.24 16zM512 472.96l-290.88-233.6h581.76z"
                                p-id="7603"
                                :fill="
                                    !this.$store.state.isDark ? '#000' : '#fff'
                                "
                            ></path></svg
                    ></a>
                </div>
            </div>
        </div>
        <div class="poetry">
            <div class="poetryContnet">
                {{ this.poetry.content }}
            </div>
            <div class="poetryInfo">
                <div class="poetryDynasty">
                    {{ this.poetry.author }}
                </div>
                <div class="poetryAuthor">
                    {{ this.poetry.origin }}
                </div>
            </div>
        </div>
        <Music />
    </div>
</template>

<script>
import Music from "@/components/Music/Index";
export default {
    name: "Sidebar",
    data() {
        return {
            poetry: {},
        };
    },
    mounted() {
        this.$api.external.getPoetry().then((res) => {
            this.poetry = res.data;
        });
    },
    components: {
        Music,
    },
};
</script>

<style scoped>
.sideBar {
    margin-right: 15px;
}

.left {
    width: 25%;
}

.briefIntroduction {
    display: flex;
    background-color: #286dea;
    min-height: 329px;
    border-radius: 12px;
}

.brieContnet {
    position: relative;
    padding: 25px;
    color: #fff;
}

.brieContnet div,
h2 {
    margin-bottom: 20px;
}

.brieContnet div:last-child {
    margin-bottom: 0;
    display: flex;
}

.brieContnet div:last-child a {
    margin-right: 10px;
}

.brieContnet div:last-child a:last-child {
    margin-right: 0;
}

.brieContnet .img {
    border-radius: 0;
    height: 140px;
    display: inherit;
    filter: drop-shadow(-5px 14px 8px #00000008);
    position: absolute;
    right: -10px;
    bottom: -20px;
    width: auto;
    z-index: 0;
}

.brieContnet .img > img {
    height: 100%;
}

.brieContnet .dsc,
.dsc1 {
    color: rgba(255, 255, 255, 0.8);
}

.brieContnet b {
    color: #fff;
}

.brieContnet .button {
    display: inline-block;
    padding-top: 10px;
}

.brieContnet .button a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: #fff;
    color: #286dea;
    border-radius: 50%;
}

.brieContnet .button a svg {
    width: 20px;
    height: 20px;
}

.sideBar > div {
    margin-bottom: 25px;
}

.sideBar > div:last-child {
    margin-bottom: 0;
}

.poetry {
    background-color: #fff;
    border-radius: 12px;
    padding: 10px;
}

.poetryContnet {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: #edf0f7;
    min-height: 62px;
}

.poetryInfo {
    display: flex;
    color: rgb(60 60 67 / 60%);
    font-size: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.poetryDynasty {
    padding: 2px 4px 2px 6px;
    background: #edf0f7;
    color: #363636;
    border-radius: 8px;
}

.poetryAuthor {
    padding: 2px;
    margin-left: 8px;
}
</style>